<template>
    <hl-page :title="title" :hidden-tab-bar="true" :hidden-back="false">
        <div class="content" slot="content">
            <div class="form">
                <h2>阿玛迪斯--<span>{{title}}</span></h2>
                <div class="form-cell">
                    <p>
                        <input placeholder="购买数量" v-model="num" type="number"/><span class="unit">单位</span>
                    </p>
                </div>
                <div class="form-cell" v-if="index == 0">
                    <p>
                        <input placeholder="购买年限" readonly @click="showPicker" v-model="year" type="number"/><span
                            class="unit">年限</span>
                    </p>
                </div>
                <p class="price">
                    总价：￥{{num * price}}
                </p>
                <p class="tips" v-if="index == 0">
                    基金每单位1万元
                </p>
                <p class="tips" v-else>
                    股权每单位1万元，{{$store.state.stock_value}}股
                </p>
                <cube-button @click="submit">立即认购</cube-button>
            </div>
        </div>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import {Url} from "../utils/config";

    const colData = [{text: '1年期', value: 1}, {text: '2年期', value: 2}, {text: '3年期', value: 3}];

    export default {
        components: {HlPage},
        name: "buy",
        data() {
            return {
                title: '股权认购',
                index: 0,
                num: "",
                price: 10000,
                year: '',
                picker: null
            }
        },
        mounted() {
            let index = this.$route.query.index;
            if (index == 0) {
                this.title = '基金认购'
            } else {
                this.title = '股权认购'
            }
            this.index = index;
            this.picker = this.$createPicker({
                title: '选择年限',
                data: [colData],
                onSelect: (selectedVal, selectedIndex, selectedText) => {
                    this.year = selectedVal[0]
                },
                onCancel: () => {
                    this.$createToast({
                        type: 'correct',
                        txt: 'Picker canceled',
                        time: 1000
                    }).show()
                }
            });
        },
        methods: {
            showPicker() {
                this.picker.show();
            },
            submit() {
                let url = this.index == 0 ? Url.buyFund : Url.buyStock
                let params = {};
                if (this.index == 0) {
                    if (this.year <= 0) {
                        this.$createToast({
                            txt: "请选择年限",
                            type: 'warn',
                            time: 1500
                        }).show()
                        return false;
                    } else {
                        params.year = this.year
                    }
                }
                params.num = this.num;
                let toast = this.$createToast({
                    txt: "正在申请",
                    time: 0
                })
                this.$post(url, params).then((res) => {
                    toast.hide();
                    let text = this.index == 0 ? '基金' : '股票'
                    this.$createDialog({
                        type: 'alert',
                        title: '申请成功',
                        content: `您的${text}申请已成功！`,
                        icon: 'cubeic-alert',
                        onConfirm: () => {
                            this.$router.push('/')
                        }
                    }).show()
                }).catch((error) => {
                    toast.hide();
                    this.$createToast({
                        txt: error,
                        type: 'error',
                        time: 1500
                    }).show()
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/theme";

    .content {
        background: #f0f0f0;
        .form {
            margin: 64px;
            border-radius: 5px;
            background: #fff;
            box-sizing: border-box;
            box-shadow: #e0e0e0 2px 2px 2px;
            h2 {
                font-size: 32px;
                color: #444;
                font-weight: normal;
                padding: 64px 24px;
                text-align: center;
                margin-bottom: 32px;
                border-bottom: dashed 1PX #e0e0e0;
                span {
                    color: @app-color;
                }
            }
            .tips {
                font-size: 24px;
                color: #888888;
                text-align: center;
                padding: 32px 12px;
            }
            .price {
                font-size: 32px;
                color: @app-color;
                text-align: center;
                padding: 24px 0;
                border-bottom: dashed 1PX #e0e0e0;
            }
        }
        .form-cell {
            height: 60px;
            padding: 12px 0;
            margin: 0 12px;
            border-bottom: 1PX solid #ddd;
            display: flex;
            flex-direction: row;
            align-items: center;
            > p {
                height: 60px;
                margin-left: 40px;
                margin-right: 40px;
                display: flex;
                flex: 1;
                font-size: 14PX;
                justify-content: flex-start;
                align-items: center;
                .amds {
                    font-size: 48px;
                    color: #e64e4d;
                }
                input {
                    flex: 1;
                    border: none;
                    outline: none;
                    margin-left: 20px;
                }
            }
        }
    }
</style>